<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Html前端模板引擎</title>
	<link type="text/css" rel="stylesheet" media="all" href="../css/style.css"/>
	<script type="text/javascript" src="../jquery/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../plugins/sweet-jquery-plugin-v1.1.js"></script>
	<script type="text/javascript" src="../js/data.js"></script>
	<script type="text/javascript">
		$(function(){
				//定义模板一
				var tpl =  '<[ foreach ($data as item) { ]>'
							+ '<div class="pokerBox">'
							+ '<div class="innerBox">'
								+ '<h3><[= item.employeesName ]></h3>'
								+ '<table width="224" border="0" cellspacing="0" cellpadding="0">'
								+ '<[ if (item.photo =="") {]>'
								+ '<tr><td rowspan="6" width="70"><img width="60" height="84" src="../css/images/user-head.png" /></td>'
								+ '<[} else{]>'
								+ '<tr><td rowspan="6" width="70"><img width="60" height="84"  src="<[= item.photo ]>" /></td>'
								+ '<[}]>'
								+ '<td width="146">部门: </span><[= item.orgName ]></td></tr>'
								+ '<td >职位: <[= item.posName ]></td></tr>'
								+ '<td >职级: <[= item.proTitleLevel ]></td></tr>'
								+ '<tr><td>----------------------------------</td></tr>'
								+ '<tr><td><img src="../css/images/tel.png" /><[= item.mobile ]></td></tr>'
								+ '</table>'
								+ '<div class="btn">'
									+ '<[ if (item.status =="0") {]>'
									+ '<button type="button" class="btn btn-public">晋升</button>'
									+ '<[} else if(item.status =="1"){]>'
									+ '<button type="button" class="btn btn-public">降级</button>'
									+ '<[} else if(item.status =="2"){]>'
									+ '<button type="button" class="btn btn-public">离职</button>'
									+ '<[}]>'
								+ '</div>'
							+ '</div>'
						+ '</div>'
					+ '<[} ]>';
				//定义模板二
				var tpl2 =  '<[ for (var i = 0, l = $data.length; i < l; i++) { ]>'
					+ '<[=$util.switchPokerBox(i)]>'
						+ '<div class="innerBox">'
								+ '<h3><[= $data[i].employeesName ]></h3>'
								+ '<table width="224" border="0" cellspacing="0" cellpadding="0">'
								+ '<[ if ($data[i].photo =="") {]>'
								+ '<tr><td rowspan="6" width="70"><img width="60" height="84" src="../css/images/user-head.png" /></td>'
								+ '<[} else{]>'
								+ '<tr><td rowspan="6" width="70"><img width="60" height="84"  src="<[= $data[i].photo ]>" /></td>'
								+ '<[}]>'
								+ '<td width="146">部门: </span><[= $data[i].orgName ]></td></tr>'
								+ '<td >职位: <[= $data[i].posName ]></td></tr>'
								+ '<td >职级: <[= $data[i].proTitleLevel ]></td></tr>'
								+ '<tr><td>----------------------------------</td></tr>'
								+ '<tr><td><img src="../css/images/tel.png" /><[= $data[i].mobile ]></td></tr>'
								+ '</table>'
								+ '<div class="btn">'
									+ '<[ if ($data[i].status =="0") {]>'
									+ '<button type="button" class="btn btn-public">晋升</button>'
									+ '<[} else if($data[i].status =="1"){]>'
									+ '<button type="button" class="btn btn-public">降级</button>'
									+ '<[} else if($data[i].status =="2"){]>'
									+ '<button type="button" class="btn btn-public">离职</button>'
									+ '<[}]>'
								+ '</div>'
						+ '</div>'
					+ '</div>'
				+ '<[} ]>';
				//定义模板三
				var tpl3 =  '<[ for (var i = 0, l = $data.length; i < l; i++) { ]>'
					+ '<[=$util.switchPokerBox(i)]>'	
						+ '<div class="innerBox">'
							+ '<h3><[= $data[i].employeesName ]></h3>'
							+ '<table width="224" border="0" cellspacing="0" cellpadding="0">'
							+ '<[ if ($data[i].photo =="") {]>'
							+ '<tr><td rowspan="6" width="70"><img width="60" height="84" src="../css/images/user-head.png" /></td>'
							+ '<[} else{]>'
							+ '<tr><td rowspan="6" width="70"><img width="60" height="84"  src="<[= $data[i].photo ]>" /></td>'
							+ '<[}]>'
							+ '<td width="146">部门: </span><[= $data[i].orgName ]></td></tr>'
							+ '<td >职位: <[= $data[i].posName ]></td></tr>'
							+ '<td >职级: <[= $data[i].proTitleLevel ]></td></tr>'
							+ '<tr><td>----------------------------------</td></tr>'
							+ '<tr><td><img src="../css/images/tel.png" /><[= $data[i].mobile ]></td></tr>'
							+ '</table>'
							+ '<div class="btn">'
								+ '<[=$util.switchS($data[i].status)]>'	
							+ '</div>'
						+ '</div>'
					+ '</div>'
				+ '<[} ]>';
				
				var tpl4 = '<[ for (var i = 0, l = $data.length; i < l; i++) { ]>'
						+ '<li class="resumeLine">'
							+ '<div class="resumeUserHead">'
								+ '<a href="recruitment/rec_view_resume.html?resumeId=<[= $data[i].resumeId ]>&readState=<[= $data[i].readState ]>&resumeUrl=<[= $data[i].resumeUrl ]>" target="_blank">'
									+ '<[=$util.imageUrl($data[i].imageUrl)]>'
								+ '</a>'
							+ '<[=$util.readState($data[i].readState)]>'
							+ '</div>'
							+ '<div class="resumeContent">'
							+ '<ul class="gridUl">'
							+ '<li><div class="grid-p-55"><a href="recruitment/rec_view_resume.html?resumeId=<[= $data[i].resumeId ]>&readState=<[= $data[i].readState ]>&resumeUrl=<[= $data[i].resumeUrl ]>" target="_blank" class="resumeName"><[= $data[i].name ]></a><span>(<[= $data[i].genderDic ]>、<[= $data[i].age ]> 岁) -- </span>关联职位：<span class="valueStyle" op="refPosName"><[= $data[i].refPosName ]></span></div>'
							+ '<div class="grid-p-25">'
							+ '<[ if ($data[i].commentFlag) {]>'
							+ '<span class="button addEva" control="viewEva" value="<[= $data[i].resumeId ]>">评价</span><span class="button addEvaIcon" control="addEvaluation" value="<[= $data[i].resumeId ]>,<[= $data[i].name ]>,<[= $data[i].email ]>"></span>'
							+ '<[}]>'
							+ '<[ if ($data[i].planFlag) {]>'
							+ '<span class="button addEva" control="planAdjust" value="<[= $data[i].resumeId ]>,<[= $data[i].name ]>,<[= $data[i].email ]>">安排</span><span class="button addEvaIcon" control="arrangePlan" value="<[= $data[i].resumeId ]>,<[= $data[i].name ]>,<[= $data[i].email ]>"></span>'
							+ '<[}]>'
							+ '</div>'
							+ '<div class="grid-p-20 textr"><a target="_blank" href="recruitment/rec_print_resume.html?resumeUrl=<[= $data[i].resumeUrl ]>" class="iconOfPrint" title="打印该简历"></a><[= $data[i].sourceName ]>'
							+ '<[=$util.obsoleteFlag($data[i].obsoleteFlag,$data[i].resumeId)]>'
							+ '</div></li>'
							+ '<li>工作年限：<span class="valueStyle"><[= $data[i].serviceYearDic ]></span>最近从事公司：<span class="valueStyle"><[= $data[i].lastCompany ]></span>最近职位：<span class="valueStyle"><[= $data[i].lastPosition ]></span></li>'
							+ '<li>毕业院校：<span class="valueStyle"><[= $data[i].graduatedFrom ]></span>专业：<span class="valueStyle"><[= $data[i].major ]></span>学历：<span class="valueStyle"><[= $data[i].degreeDic ]></span></li>'
							+ '<li>移动电话：<span class="valueStyle"><[= $data[i].mobile ]></span>邮箱：<span class="valueStyle"><[= $data[i].email ]></span></li>'
							+ '</ul>'
							+ '<div class="impreBox">'
							+ '<div class="impreTitle">个人标签：</div>'
							+ '<div class="impreText">'
							+ '<ul class="impreOverBox">'
							+ '<li class="impreListbox">'
							+ '<[=$util.impression($data[i].impression,i,$data[i].resumeId)]>'
							+ '</li></ul></div></div>'
							+ '<div class="resumeBtn">'
							+ '<div class="resumeBtnView">'
							+ '<a href="recruitment/rec_view_resume.html?resumeId=<[= $data[i].resumeId ]>&readState=<[= $data[i].readState ]>&resumeUrl=<[= $data[i].resumeUrl ]>" target="_blank" target="_blank" class="viewresume">查看详细简历</a>'
							+ '</div>'
							+ '<[ if ($data[i].moveto==""|| $data[i].moveto[0]=="6") {]>'
							+ ''
							+ '<[} else{]>'
							+ '<div class="resumeBtnMove resumeBtnSlidedown">'
							+ '<a href="javascript:void(0);">移动到</a>'
							+ '<div class="slideDownBox slideDownWidth1"><[= $data[i].moveto ]>'
							+ '</div>'
							+ '</div>'
							+ '<[} ]>'
							+ '<[ if ($data[i].moreopt=="") {]>'
							+ ''
							+ '<[} else{]>'
							+ '<div class="resumeBtnMore resumeBtnSlidedown">'
							+ '<a href="javascript:void(0);">更多操作</a>'
							+ '<div class="slideDownBox slideDownWidth2">'
							+ '<[ for (var j = 0, l = $data.length; j < l; j++) { ]>'
							+ '<[=$util.moreopt($data[i].moreopt,j,$data[i].resumeId,$data[i].name,$data[i].email)]>'
							+ '<[} ]>'
							+ '</div></div>'
							+ '<[} ]>'
							+ '<div class="resumeStateIcon">人才状态：<[= $data[i].stateName ]></div></div></div>'
							+ '<div class="clearfix"></div>'
							+ '</li>'
						+ '<[} ]>';
				
				//辅助处理方法
				$.Sweet.extendUtil({
						switchS: function(status){
							 switch(status){
								case "0": 
									return '<button type="button" class="btn btn-public">晋升</button>';
									break;
								case "1": 
									return '<button type="button" class="btn btn-public">降级</button>';
									break;
								case "2": 
									return '<button type="button" class="btn btn-public">离职</button>';
									break;
							 }
						},
						switchPokerBox: function(i){
							if((i+1)%3 == 0){
								return '<div class="pokerBox mgR">';
							}else{ return '<div class="pokerBox">';}
						},
						imageUrl: function(imageUrl){
							if(imageUrl.toString().replace(/^\s+|\s+$/g,"")==""){
								return '<img width="71" height="99" src="images/user-head.png" />';	
							}else{
								return '<img width="71" height="99" src="'+ imageUrl +'" />';	
							}
						},
						readState: function(readState){
							if(readState == "0") return '<span class="newResumeIcon"></span>';
						},
						obsoleteFlag: function(obsoleteFlag,resumeId){
							if(parseInt(obsoleteFlag)){
								return	'<a href="javascript:void(0);" class="button elimiResume mg_r10 vhidden domain_btn_4" control="delResume" resumestate="' + resumeId + ',' + '6"></a>';
							}
						},
						impression: function(impression,j,resumeId){
							if(impression==""){ return ' 该简历暂无个人标签。'
							}else{
								for(var j=0; j<impression.length; j++){
									return '<a href="javascript:void(0);" id="im'+ resumeId + j +'" control="delImp" value="' + impression[j] + ',' + resumeId + '">' + impression[j] + '</a>';
								}
							}
						},
						moreopt:function(moreopt,j,resumeId,name,email){
								if(j<=5){
									switch(moreopt[j]){
										case "0":
											return '<div><a href="javascript:void(0);" control="addImpression" value="' + resumeId + ',' + name + ',' + email + '">个人标签</a></div>';
											break;
										case "1":
											return '<div><a href="javascript:void(0);" control="assPosition" value="' + resumeId + ',' + name + ',' + email + '">关联职位</a></div>';
											break;
										case "2":
											return '<div><a href="javascript:void(0);" control="entry" value="' + resumeId + ',' + name + ',' + email + '">入职</a></div>';
											break;
										case "3":
											return '<div><a href="javascript:void(0);" control="careMange" value="' + resumeId + ',' + name + ',' + email + '">关怀管理</a></div>';
											break;
										case "4":
											return '<div><a href="javascript:void(0);" control="updateResume" value="' + resumeId +'">修改简历</a></div>';
											break;
										case "5":
											return '<div><a href="javascript:void(0);" control="deleteResume" value="' + resumeId +'">删除简历</a></div>';
											break;
									}
								}
								
						}
				  });
				var resumeHtml = $.Sweet(tpl4).applyData(data);
				$("#resumeHtml").append(resumeHtml);
				//实例
				/*jQuery.getJSON("http://172.21.17.138/ehr/Service.nd?act=inquireEmployeesByOrgId&orgId=2203&viewAll=1&pageIndex=1&pageRows=9&jsoncallback=?", 
					function(result){			
						var arrData = result.data;//获取json数据源，并赋值给arrData
						if (result && result.operateFlg == "SS") {
							var html = $.Sweet(tpl2).applyData(arrData);//通过html模板，由js引擎处理输出完整的html代码
								 $("#myHtml").append(html);
						}
				});*/
				var html = $.Sweet(tpl2).applyData(data2);//通过html模板，由js引擎处理输出完整的html代码
								 $("#myHtml").append(html);
				 //绑定事件
				$("#myHtml").find(".pokerBox").live("mouseover",function() {
					$(this).addClass('pokerBoxHover');
				});
				$("#myHtml").find(".pokerBox").live("mouseout",function() {
					$(this).removeClass('pokerBoxHover');
				});
				//绑定事件
				$("#resumeHtml").find(".resumeBtnSlidedown").hover(function(){
					$(this).css("position","relative");
					$(this).find(".slideDownBox").show();
				},function(){
					$(this).css("position","static");
					$(this).find(".slideDownBox").hide();
				});
		});
	</script>
	<style type="text/css">
		/*扑克牌式显示员工信息*/
		#myHtml{ height:430px; margin:0 auto 50px; width:728px;}
		.pokerBox { margin-right:10px; border:1px solid #dcdcdc; width:234px; height:130px; float:left; margin-top:10px;}
		.mgR{ margin-right:0px;}
		.pokerBox .innerBox{ cursor:pointer;}
		.pokerBox .innerBox h3{ margin:0; text-align:center; height:25px; border-bottom:1px solid #dcdcdc; line-height:25px; color:#000; font-size:14px; font-family:"宋体";width: 234px; font-weight:bold;background: url(../css/images/ui-bg-sprite.png) repeat-x;}
		.pokerBox .innerBox table{ margin:5px 5px 0px 5px;}
		.pokerBox .innerBox .btn{ margin:5px; display:none;}
		.pokerBoxHover{ position:relative;}
		.pokerBoxHover .innerBox{ background:#FFFFFF;border:3px solid #86BC67;position: absolute;top:-3px; left:-3px;}
		.pokerBoxHover .innerBox .btn{ display:block;}
		.btn{display: inline-block;zoom: 1;*display: inline;border:0px;vertical-align:middle;cursor: pointer;text-decoration: none; padding-bottom:5px; *padding-bottom:0px; padding-bottom:0px\9; outline:none;}
		.btn-public{height:26px; line-height:26px; color:#585757; background:url(../css/images/state_default_bg.png); border:1px solid #dcdcdc;}
		.btn-public:hover{background:url(../css/images/state_hover_bg.png);}
		.btn-public:active{background:url(../css/images/state_active_bg.png);}
		/*人才管理*/
		.resumeHtml{width:688px; padding:10px; border:1px solid #e6e6e6; margin:10px auto;}
		.resumeLine{ margin-bottom:5px; border-bottom: 1px dashed #dcdcdc; clear:both;}
		.resumeLine .resumeUserHead{ float:left; width:71px; height:99px; position:relative;}
		.resumeLine .resumeUserHead .newResumeIcon{background:url(../../images/new_icon.png) no-repeat; position:absolute; top:0px; right:0px; width:25px; height:16px;}
		.resumeLine .resumeContent{ float:right; width:607px; color:#626262; margin-bottom:15px; line-height:20px; margin-left:10px; margin-top:-10px;}
		.resumeLine .resumeContent .addEva{background:url(../../images/addeval_btn.png) 0 0 no-repeat; width:44px; height:22px; line-height:22px; text-align:center; margin-left:10px; color:#000; font-weight:normal;}
		.resumeLine .resumeContent .addEvaIcon{background:url(../../images/addeval_btn.png) -45px 0 no-repeat; width:20px; height:22px;}
		.resumeLine .resumeContent .resumeName{ color:#000; font-size:13px; font-weight:bold; text-decoration:none;}
		.resumeLine .resumeContent .resumeName:hover{ text-decoration:underline;}
		.resumeLine .resumeContent .valueStyle{ color:#000; min-width:40px; margin-right:10px;display: inline-block;}
		.resumeLine .resumeContent .elimiResume{ background:url(../../images/elimi_btn.png); width:41px; height:22px; margin-left:10px;}
		.resumeLine .resumeBtn a{text-decoration:none; }
		.viewFiveResume{ float: left; padding-right:5px;background:url(../../images/btn_look.gif) no-repeat;  width:73px;color:#101010; padding-left:8px; height: 22px;line-height: 22px;}
		.resumeBtnView{float: left; margin-right:8px;margin-top: 5px;}
		.resumeBtnView a{ padding-left:8px; margin-right:0px;color:#101010; display:block; float:left}
		.resumeBtnView .viewresume{height: 22px;line-height: 22px;background:url(../../images/btn_look.gif) no-repeat; width:79px;}
		.resumeBtnView .delResume{height: 22px;line-height: 22px;background:url(../../images/btn_look.gif) -86px 0; no-repeat; width:35px;}
		.resumeBtnMove a,.resumeBtnMore a{ color:#101010; padding-left:8px; z-index: -2;}
		.resumeBtnMove,.resumeBtnMore{float:left; height:22px; line-height:22px; margin-right:8px;margin-top: 5px;}
		.resumeBtnMove{background:url(../../images/btn_look.gif) -135px 0 no-repeat; width:64px;}
		.resumeBtnMore{background:url(../../images/btn_look.gif) -207px 0 no-repeat; width:76px;}
		.resumeBtnSlidedown{}
		.resumeStateIcon{ float:right;height: 22px;line-height: 22px;margin-top: 5px;font-weight:bold; color:#000;}
		.slideDownBox{position:absolute;top:21px;left:0;border:solid 1px #cccccc; padding:2px 8px 2px 0; background:#FFF; display:none;}
		.slideDownWidth1{ width:54px;}
		.slideDownWidth2{ width:66px;}
		.slideDownBox a{ color:#666; text-decoration:none;}
		.slideDownBox *{text-align:left; white-space:nowrap; line-height:18px;}
		.slideDownBox ul ul{padding-left:15px;}
		.slideDownBox ul li ul li{ _height:18px;}
		/* -----------个人标签---------- */
		.impreBox{color:#626262;}
		.impreTitle{ float:left;}
		.impreText{ float:left;width:540px;}
		.impreOverBox{float:left;overflow:hidden;}
		.impreOverBoxHover{ position:absolute;background:#FF9; border:solid 1px #F60; height:auto; padding:5px; padding-bottom:0; padding-left:0; z-index:999;}
		.impreListbox{float:left;}
		.impreText a{font-style:normal;color:#666; cursor:pointer; display:inline-block;padding-right:15px; padding-left:3px;  border: 1px solid #999; margin-left:5px; margin-bottom:5px;text-decoration:none;}
		.impreText a:hover{border:1px solid #FF8040; background:url(../../images/ico_delete.jpg) no-repeat right center; text-decoration:none;}
	</style>
</head>

<body>
	<div id="myHtml">
		
		
	</div>
	<ul id="resumeHtml" class="resumeHtml">
		
	</ul>
</body>
</html>
